哈囉大家好！今天要帶大家一起探索 Nuxt3 的奧秘。不知道大家有沒有遇過這種情況：明明已經學會 Vue，但是在開發大型專案時卻總覺得少了點什麼？那個「少了點什麼」，很可能就是 Nuxt3！
哇，時間過得真快！一眨眼，我們的鐵人賽已經進行到第 21 天了，剩下不到 10 天就要完賽了。說實在的，我的心情有點緊張又興奮。緊張的是時間真的不多了，興奮的是我們終於要進入前端專案的世界啦！
沒錯，各位親愛的同學們，我們花了整整 20 天的時間，打造了一個堅實的後端基礎。現在，是時候把我們的注意力轉移到前端了。畢竟，再厲害的後端，如果沒有一個好看又好用的前端介面，使用者也不會喜歡，對吧？
所以，接下來的幾天，我們要一起挑戰的就是 Nuxt3！這可是 Vue 的超級加強版，不僅繼承了 Vue 的所有優點，還為我們解決了許多在開發大型專案時常遇到的問題。雖然時間緊迫，但我相信只要我們一起努力，一定可以在短時間內掌握 Nuxt3 的精髓，為我們的專案畫下完美的句點！

準備好了嗎？讓我們一起踏上這段刺激又充實的 Nuxt3 學習之旅吧！衝啊！

Nuxt3 vs Vue：前端開發的超級助手

Nuxt3 確實是 Vue 的加強版，但它的強大之處遠不止於此。讓我們來看看 Nuxt3 如何在多個方面超越了 Vue：

1. 自動路由：
   • Vue 需要手動設定路由。
   • Nuxt3 根據 pages 資料夾的結構自動生成路由，省去了大量配置時間。
   • 支援動態路由、嵌套路由，甚至是自定義的參數化路由。
2. 服務器端渲染（SSR）：
   • Vue 主要是客戶端渲染，需要額外設定才能實現 SSR。
   • Nuxt3 內建 SSR 支援，大幅提升首次載入速度和 SEO 表現。
   • 還提供了混合渲染模式，可以針對不同頁面選擇最適合的渲染方式。
3. 靜態網站生成（Static Site Generation, SSG）：
   • Vue 需要額外的工具如 VuePress 來實現。
   • Nuxt3 內建 SSG 功能，可以輕鬆生成高效能的靜態網站。
   • 支援增量式靜態生成（ISR），兼顧了靜態網站的效能和動態內容的即時性。
4. 檔案系統 API：
   • Vue 需要額外設定後端框架如 Express 來處理 API。
   • Nuxt3 的 server 資料夾可以直接寫 API，實現真正的全端開發。
   • 支援 API 路由的自動生成，大幅簡化了後端開發流程。
5. 模組系統：
   • Nuxt3 提供了強大的模組系統，可以輕鬆擴展功能。
   • 豐富的社群模組生態，幾乎覆蓋了所有常見的開發需求。
6. 優化效能：
   • 自動代碼分割：Nuxt3 會自動將代碼分割成更小的塊，提升載入速度。
   • 自動導入：組件和組合式函數無需手動導入，減少樣板代碼。
   • 圖片優化：內建的圖片元件可以自動進行圖片優化。
7. TypeScript 支援：
   • Nuxt3 從底層就支援 TypeScript，無需額外配置。
   • 提供了更好的型別推斷和自動補全。
8. 開發體驗：
   • 熱模組替換（HMR）更快速、更可靠。
   • 錯誤處理更友善，提供清晰的錯誤訊息和錯誤頁面。
9. 部署靈活性：
   • 可以部署為 SSR 應用、靜態網站，甚至是 Serverless 函數。
   • 支援多種主流的雲平台，如 Vercel、Netlify 等。
10. SEO 友好：
    • 內建的 useHead 組合式函數，輕鬆管理 meta 標籤。
    • 自動生成 sitemap，有利於搜尋引擎爬蟲。
      Nuxt3 不僅簡化了開發流程，還提供了一個完整的生態系統來處理常見的 Web 開發需求。它讓開發者可以專注於業務邏輯，而不是被繁瑣的配置和優化工作所困擾。無論你是要開發一個小型的個人網站，還是大型的企業應用，Nuxt3 都能提供強大的支援，讓你的開發之路更加順暢。

建立前端 Nuxt3 專案

好啦，說了這麼多，我們來實際操作看看吧！

1. 首先，用 VSCode 打開你想要放專案的資料夾。我自己是選「文件」資料夾，你們可以選自己喜歡的地方。
   

2. 接著，打開終端機，輸入以下指令來建立專案：
   這裡的 <project-name> 要替換成你想要的專案名稱喔！
   更詳細也可以查閱 官方文件

   npx nuxi@latest init <project-name>
   

   
   部分 mac 才需要加 sudo

3. 接下來會問你一些問題，這樣回答就可以了：

   • 是否安裝依賴套件？ → 當然是 y 啦！
   • 用哪種套件管理器？ → 我們就選最常見的 npm
   • 要不要初始化 git？ → 當然是 yes，版本控制很重要der！
     
     

4. 等它跑完之後，我們就可以進入剛剛建立好的專案了。你可以用指令：

   cd <project-name>
   

   或者是重新開啟資料夾。我自己比較喜歡重開，這樣左邊的工作區看起來比較整齊。
   

認識 Nuxt3 專案基本架構

現在，讓我們來看看 Nuxt3 專案的基本架構。別擔心，看起來檔案很多，但其實每個都有它的用途：

1. app.vue：這就是我們網站的大家長，所有頁面都會在這裡面呈現。
2. nuxt.config.ts：這是 Nuxt 的設定檔，你可以在這裡設定網站的基本資訊、引入 CSS、設定插件等。
3. .nuxt 資料夾：這裡面是 Nuxt 自己產生的檔案，我們通常不會去動它。
4. components 資料夾：這裡放的是可以重複使用的 Vue 元件。
5. pages 資料夾：這裡放的是網頁的各個頁面，Nuxt 會根據這裡的檔案自動產生網址路徑。
6. public 資料夾：這裡放的是靜態檔案，像是圖片、字型檔之類的。
7. server 資料夾：這裡放的是伺服器端的程式碼，比如說 API 的設定。
8. package.json：這個檔案記錄了專案需要用到的套件和一些常用的指令。
9. tsconfig.json：這是 TypeScript 的設定檔。
10. node_modules 資料夾：這裡面放的是專案用到的所有套件。
11. .gitignore：這個檔案告訴 Git 哪些檔案不需要被版本控制。
12. README.md：這是專案的說明書，通常會寫一些專案的介紹和使用方法。
    

嘗試執行專案

好啦，現在我們來把專案跑起來看看吧！

1. 如果你在建立專案時沒有下載依賴套件，先在終端機輸入：

   npm install
   

2. 接著，輸入以下指令來啟動專案：

   npm run dev
   

3. 然後打開瀏覽器，輸入 http://localhost:3000/
   

如果你看到了 Nuxt 的歡迎頁面，恭喜你！你的 Nuxt3 專案已經成功運行了！

Nuxt 專案資料夾結構說明

Nuxt 給我們的是一個極簡版本，有些資料夾是需要我們自己建立的。這裡再詳細說明一下每個資料夾的用途：

1. pages/：這裡放的是網頁的各個頁面。
2. components/：這裡放可重複使用的 Vue 元件。
3. layouts/：這裡放網站的布局元件，像是共用的頁首頁尾。
4. public/：靜態檔案放這裡，像是網站 logo 之類的。
5. server/：伺服器端的程式碼放這裡。
6. assets/：需要經過處理的資源放這裡，像是 SASS 檔案。
7. composables/：可重複使用的組合式函數放這裡。
8. plugins/：需要在應用程式啟動前執行的 JavaScript 插件放這裡。
9. middleware/：中間件檔案放這裡，用來在頁面渲染前執行一些程式碼。
10. stores/：如果你用 Pinia 來管理狀態，相關的檔案就放這裡。

我們後面有需要使用時會再做示範 & 詳細說明 ~

別忘了版控！讓我們把專案上傳到 GitHub

寫程式時，版本控制超重要的！來，跟著我一起把專案上傳到 GitHub：

1. 先在專案資料夾中打開終端機，輸入這些指令：

   git init
   git add .
   git commit -m '初始化 Nuxt3 專案'
   

   這幾行指令會初始化 Git、將所有檔案加入追蹤，然後提交第一個版本。

2. 接著，到 GitHub 建立一個新的儲存庫，複製它給你的連接指令。通常長這樣：

   git remote add origin [你的 GitHub 儲存庫網址]
   git branch -M main
   git push -u origin main
   

   這些指令會將你的本地專案連接到 GitHub，並把程式碼推上去。
   搞定！這樣你的 Nuxt3 專案就成功上傳到 GitHub 了。之後要更新的話，記得常常 commit 和 push 喔！
   版本控制不僅可以幫你記錄每次的修改，還能方便與他人協作。養成好習慣，程式人生會順暢很多！

如果這些指令無法幫助你完成的話，可以回去看 DAY13 Github 新手村 ~

總結

哇，我們今天學了好多東西！從認識 Nuxt3，到建立專案，再到了解專案結構，相信大家對 Nuxt3 已經有了初步的認識。別擔心如果有些地方還不太懂，這很正常！學習新技術就像爬山一樣，要一步一步來。重要的是，我們已經邁出了第一步！
接下來，我們會慢慢深入 Nuxt3 的各個功能，一起打造出厲害的網站。記得，程式開發最重要的就是動手做，所以大家一定要跟著教學實際操作喔！
大家有沒有想要更詳細補充的部分呢？歡迎在下方留言分享喔！讓我們一起在 Nuxt3 的世界中探險吧！加油！
（對了，如果你覺得今天的內容對你有幫助，別忘了給個讚支持一下喔！這會是我繼續努力的動力呢～）